<template>
  <div class="acount">
    <el-form :inline="true" :model="formData" class="demo-form-inline">
			<el-form-item>
        <el-select v-model="formData.type" placeholder="类型" clearable>
					<el-option label="订单结算" value="1"></el-option>
					<el-option label="商家划转到个人" value="2"></el-option>
					<el-option label="个人划转到商家" value="3"></el-option>
				</el-select>
      </el-form-item>
      <el-form-item>
				<el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
				 end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
	    <el-form-item>
				<el-button type="primary" @click="onSearch" icon="el-icon-search">搜索 </el-button>
			</el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true">金豆划转</el-button>
			</el-form-item>
    </el-form>
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 60px;
      "
    >
      <div class="">
        <span>金豆总余额：</span>
        <span style="font-size: 30px; color: red; font-weight: bold">{{
          count
        }}</span>
      </div>
      <div style="margin-left:10px">
        <span>金豆流水：</span>
        <span style="font-size: 30px; color: red; font-weight: bold">{{
          goldenBeansTotal
        }}</span>
      </div>
    </div>
    <el-table :data="candyTableData" style="width: 100%" border stripe>
      <el-table-column
        prop="id"
        label="明细id"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="lastGoldenBeans"
        label="变更前金豆数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="newGoldenBeans"
        label="最新金豆数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="changeGoldenBeans"
        label="金豆变化数量"
        align="center"
      >
        <template slot-scope="scope">
          <span :style="{color:scope.row.type==1?'red':'#04c504'}">{{scope.row.changeGoldenBeans}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" align="center">
        <template slot-scope="scope">
          <i
            :class="scope.row.type == 1 ? 'el-icon-top' : 'el-icon-bottom'"
            :style="{ color: scope.row.type == 1 ? 'red' : '#04c504' }"
          ></i>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.status == 0 ? "正常" : "已回退" }}
        </template>
      </el-table-column>
      <el-table-column prop="dataType" label="数据来源" align="center">
        <template slot-scope="scope">
          {{ typeText[scope.row.dataType] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="dataRemarks"
        label="数据备注"
        align="center"
      ></el-table-column>
      <el-table-column prop="createDate" label="变更时间" align="center"></el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        :page-size="size"
        :current-page="page"
        layout="prev, pager, next,total,jumper"
        :total="total"
        background
        @current-change="currentChange"
      ></el-pagination>
    </div>
    <el-dialog title="金豆划转" :visible.sync="dialogVisible" width="30%">
			<golden-bean-change v-if="dialogVisible" @success="changeSuccess"></golden-bean-change>
		</el-dialog>
  </div>
</template>

<script>
import goldenBeanChange from './components/goldenBeanChange.vue'
export default {
  components: {
    goldenBeanChange
  },
  data() {
    return {
      goldenBeansTotal: 0,
      date: [],
      formData: {
        startDate: '',
        endDate: '',
        type: ''
      },
      page: 1,
      size: 10,
      total: 0,
      mid: localStorage.getItem("merchantId"),
      candyTableData: [],
      // count: 0,
      // status: "",
      typeText: {
        1: '订单结算',
        2: '提现',
        3: '充值'
      },
      
      dialogVisible: false,
      count: 0,
    };
  },
  mounted() {
    this.getTotal()
    this.getSweetDel();
  },
  methods: {
    onSearch() {
      this.page = 1;
      this.getSweetDel();
    },
    getTotal() {
      this.$http.get(this.$api.goldenBeanBalance, this.form).then(res => {
        if (res.code == 0) {
          this.count = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getSweetDel() {
      this.formData.startDate = this.date != null ? this.date[0] : '';
			this.formData.endDate = this.date != null ? this.date[1] : '';
      this.$http
        .get(this.$api.goldenBeanDetail, {
          page: this.page,
          size: this.size,
          ...this.formData
        })
        .then((res) => {
          this.candyTableData = res.data.list || [];
          this.goldenBeansTotal= res.data.goldenBeans || 0;
          this.total = res.extraInfo;
        });
    },
    currentChange(val) {
      this.page = val;
      this.getSweetDel();
    },
    
    changeSuccess() {
      this.dialogVisible = false;
      this.getTotal();
      this.getSweetDel();
    }
  },
};
</script>

<style scoped>
.acount {
  padding: 15px;
}
.page {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
